
<style type="text/css">
._kpr_btn button {
  padding: 0 20px;
}
#pd10ea {
  position: relative;
}
#pd10ea ._kpr_label {
  width: 30px;
  height: 30px;
  font-size: 14px;
  position: relative;
  top: 5px;
}
#pd10ea input {
  margin: 0;
  padding: 0 5px;
}
</style>
<div class="keeper-setup-init-ctn panel panel-primary">
  
  <div class="panel-heading">
    <h3>Initial Configuration</h3>
    <p>Create a Distributed Lock Service Cluster</p>
  </div>
  
  <div class="panel-body">

    <div id="osdx8e" class="alert hide ilf-group"></div>

    <form id="keeper-setup-init-form" action="#">

      <div class="form-group">
        <label>Cluster Name</label>
        <input type="text" class="form-control input-sm" name="disname" placeholder="Take a name for your cluster">
      </div>

      <div class="form-group">
        
        <label>Cluster Nodes</label>
        <input id="nnum" type="hidden" name="nnum" value="1">
        <div>
          <div id="cw2ig2" class="btn-group _kpr_btn">
            <button type="button" class="btn btn-success btn-sm">1</button>
            <button type="button" class="btn btn-default btn-sm">3</button>
            <button type="button" class="btn btn-default btn-sm">5</button>
            <button type="button" class="btn btn-default btn-sm">7</button>
            <button type="button" class="btn btn-default btn-sm">9</button>
          </div>
          Select a Number of nodes in the cluster
        </div>

        <table class="table table-condensed">
          <thead>
            <tr>
              <th width="80px">Node</th>
              <th>IP Address</th>
              <th width="100px">Port</th>
            </tr>
          </thead>
          <tbody id="pd10ea">
            <tr id="_kpr_node_1">
              <td><span class="label label-default _kpr_label">1</span></td>
              <td><input class="form-control input-sm" type="text" name="host1" value="{{.addr_default}}"></td>
              <td><input class="form-control input-sm" type="text" name="port1" value="{{.port_default}}"></td>
            </tr>
          </tbody>
        </table>

      </div>

      <button type="submit" class="btn btn-primary">Save Configuration</button>

    </form>
  </div>
</div>

<script type="text/javascript">

var _kpr_nnum_current = 1;

$("#cw2ig2 button").click(function() {

  var nnum_to = parseInt($(this).text());
  if (_kpr_nnum_current == nnum_to) {
    return;
  }

  if (nnum_to < 1) {
    nnum_to = 1;
  } else if (nnum_to > 9) {
    nnum_to = 9;
  }

  $("#cw2ig2 button.btn-success").removeClass("btn-success").addClass("btn-default");
  $(this).removeClass("btn-default").addClass("btn-success");
  

  for (var i = 2; i <= _kpr_nnum_current; i++) {

    if (nnum_to >= i) {
      continue;
    }

    $("#_kpr_node_"+ i).remove();
  }
  

  for (var i = (_kpr_nnum_current + 1); i <= nnum_to; i++) {

    if ($("#_kpr_node_"+ i).length > 0) {
      continue;
    }

    entry = '<tr id="_kpr_node_'+ i +'"> \
      <td><span class="label label-default _kpr_label">'+ i +'</span></td> \
      <td><input class="form-control input-sm" type="text" name="host'+ i +'" value=""></td> \
      <td><input class="form-control input-sm" type="text" name="port'+ i +'" value=""></td> \
      </tr>';

    $("#pd10ea").append(entry);
  }

  _kpr_nnum_current = nnum_to;
  $("#nnum").val(_kpr_nnum_current);
});


//
$("#keeper-setup-init-form").submit(function(event) {

    event.preventDefault();

    $.ajax({
        type    : "POST",
        url     : "/keeper/setup/init-post",
        data    : $(this).serialize(),//JSON.stringify(req),
        timeout : 3000,
        //contentType: "application/json; charset=utf-8",
        success : function(rsp) {

            var rsj = JSON.parse(rsp);
            //console.log(rsp);

            if (rsj.status != 200) {
                lessAlert("#osdx8e", 'alert-danger', rsj.message);
                return;
            }

            lessAlert("#osdx8e", 'alert-success', "Successfully Setup. Page redirecting");
            
            $("#keeper-setup-init-form").remove();

            window.setTimeout(function(){
                window.location = "/keeper/";
            }, 1500);
        },
        error: function(xhr, textStatus, error) {
            lessAlert("#osdx8e", 'alert-danger', '{{T . "Internal Server Error"}}');
        }
    });
});

</script>